<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Pikachu Adventure Game</title>
	
	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />
	
	<script src="assets/preloadjs-NEXT.min.js"></script>
	
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<script>
	
	var messageField;
	var live;
	var ctx;
	var alive;
	
	var spriteList;
	var stage;
    var canvas;
	var pikachu;
	var loader;
	var bg;
	var enermy;
	var bolt;
	var blood;
	var explode;

	var KEYCODE_ENTER = 13;
	var KEYCODE_UP = 38;		
	var KEYCODE_LEFT = 37;		
	var KEYCODE_RIGHT = 39;		
	var KEYCODE_DOWN = 40;

	var lfHeld;				
	var rtHeld;				
	var upHeld;			
	var dnHeld;
	
	document.onkeydown = handleKeyDown;
	document.onkeyup = handleKeyUp;
	
	function init() {
		
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);
		ctx = canvas.getContext("2d");
		
		messageField = new createjs.Text("Loading", "bold 24px Arial", "#FFFFFF");
		messageField.maxWidth = 1000;
		messageField.textAlign = "center";
		messageField.x = canvas.width / 2;
		messageField.y = canvas.height / 2;
		
		manifest = [
			{src:"img/background.png", id:"bg"},
			{src:"img/bloody.png", id:"blood"},
			{src:"img/bolting.png", id:"bolt"},
			{src:"img/Untitled-3.png", id:"enermy"},
			{src:"img/boom.png", id:"boom"},
			{src:"img/pika.png", id:"pikachu"}
		];

		loader = new createjs.LoadQueue(false);
		loader.addEventListener("complete", handleComplete);
		loader.loadManifest(manifest);
		
		}
		
		function handleKeyUp(e) {
		switch(event.keyCode) {
			case KEYCODE_LEFT:	lfHeld = false; break;
			case KEYCODE_RIGHT: rtHeld = false; break;
			case KEYCODE_UP:	upHeld = false; break;
			case KEYCODE_DOWN:  dnHeld = false; break;
		}
	}
	
</script>
	</head>
	<body onload="init();">
	<div id="loader" class="loader"></div>
	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Pikachu</span> Adventure</h1>
		<p>Use arrow keys and mouse to attack the enemy before they can get to the other side.</p>
		</header>
		<div class="canvasHolder">
		<canvas id="testCanvas" width="1024" height="542"></canvas>
		</div>
	</body>
	</html>